/*
 * @Author: xiaosihan 
 * @Date: 2024-09-18 00:17:40 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 20:16:26
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./projectAnnotations.module.less";
import { Collapse, CollapseProps, Empty } from "antd";
import projectPartsLibraryStore from "../ProjectPartsLibrary/projectPartsLibraryStore";
import ProjectAnnotationItem from "./ProjectAnnotationItem/ProjectAnnotationItem";
import { isEmpty } from "lodash";

interface Iprops {
    projectId: string,
    children?: ReactNode
}
//  项目内的零件批注
export default function ProjectAnnotations(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [partList, setPartList] = useState(projectPartsLibraryStore.partList);
    const [actives, setSctives] = useState<Array<string>>([]);
    useEffect(() => {
        projectPartsLibraryStore.getPartList(props.projectId);
    }, [props]);

    useEffect(() => autorun(() => {
        setPartList(projectPartsLibraryStore.partList);
    }), []);

    const items: CollapseProps['items'] = partList.map(p => {
        return {
            key: p.id,
            label: p.name,
            children: actives.includes(p.id) ? <ProjectAnnotationItem modelId={p.id} /> : null,
        }
    });

    return (
        <div ref={dom} className={styles.projectAnnotations} >
            {
                isEmpty(items) ?
                    <Empty description="暂无批注" />
                    :
                    <Collapse
                        className={styles.collapse}
                        items={items}
                        // accordion
                        // defaultActiveKey={}
                        onChange={(actives) => {
                            setSctives(actives);
                        }}
                    />
            }
        </div>
    );

}